<template>
    <div class="card" :style="{'clip-path': `polygon(20px 0%, 100% 0%, 100% 100%, 0% 100%,0% 20px)`}">
      <div class="card-bg"></div>
      <div
        class="card-before"
        :style="{ width: `21px`, height: `21px` }"
      ></div>
      <slot></slot>
    </div>
  </template>
  
  <script setup>
  const porp = defineProps({
    scale: {
        Type: Number,
        default: () => 1
    }
  })
  </script>
  
  <style  scoped>
  .card {
    height: 100%;
    width: 100%;
    position: relative;
    background: rgba(18, 46, 87, 0.35);
  }
  
  .card-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-shadow: 0 0 1vw #1f69b9b9 inset;
    background: linear-gradient(#33cdfa, #33cdfa) left top,
      linear-gradient(#33cdfa, #33cdfa) left top,
      linear-gradient(#33cdfa, #33cdfa) right top,
      linear-gradient(#33cdfa, #33cdfa) right top,
      linear-gradient(#33cdfa, #33cdfa) left bottom,
      linear-gradient(#33cdfa, #33cdfa) left bottom,
      linear-gradient(#33cdfa, #33cdfa) right bottom,
      linear-gradient(#33cdfa, #33cdfa) right bottom;
    background-repeat: no-repeat;
    background-size: 1px 20px, 20px 1px;
  }
  
  .card::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 1px;
    top: 0;
    left: 20px;
    background: #33cdfa;
  }
  .card::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 20px;
    top: 21px;
    left: 0;
    background: #33cdfa;
  }
  .card-before {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #33cdfa;
  clip-path: polygon(0 100%, 0 0, 100% 0);
}
  </style>